import React from 'react';
import { Title } from '@/components/shared/Title';
import style from './Filters.module.scss';
import FilterCheckBox from '@/components/shared/Filters/FilterCheckBox/FilterCheckBox';
import {Input, Slider} from 'antd';
import CheckboxGroup from "@/components/shared/Filters/CheckboxGroup/CheckboxGroup";
import {dataCheckbox} from "@/components/shared/Filters/sharedData";

const Filters = () => {
  return (
    <div>
      <Title text={'Фильтрация'} size={"sm"} className={'sort-title'} />

      {/*верхние чекбоксы */}
      <div>
        <FilterCheckBox
          text={'Фильтр по критерию'}
          checked={true}
          value={'1'}
        />
        <FilterCheckBox
          text={'дополнительный критерий'}
          value={'2'}
        />
      </div>

      {/* фильтр цены */}
      <div>
        <p>Цена от и до:</p>
        <div>
          <Input
            type="number"
            placeholder="0"
            min={0}
            max={30000}
            value={0}
          />
          <Input
            type="number"
            placeholder="30000"
            min={100}
            max={30000}
          />
        </div>

        {/* TODO в отдельный компонент и кастомный цвет */}
        <Slider range={{ draggableTrack: true }} defaultValue={[10, 60]} steps={10}/>

        <CheckboxGroup
          //name={''}
          title={'Возможные атрибуты:'}
          limit={6}
          defaultItems={dataCheckbox}
          items={dataCheckbox}
          //loding={false}
          //onClickCheckbox={}
          //selected={}
        />
      </div>
    </div>
  );
};

export default Filters;
